<template>
  <div class="content">
    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <el-row>

        <el-col :span="8">
          <el-form-item label="编号">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号">
            <el-input v-model="form.contranctcode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="8">
          <el-form-item label="起始日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date2"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>

          <el-col :span="8">
          <el-form-item label="到期日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date3"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date4"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="合同分类">
            <el-select v-model="form.value1" placeholder="请选择">
          <el-option label="买卖" value="买卖"></el-option>
          <el-option label="租赁" value="租赁"></el-option>
          <el-option label="工程" value="工程"></el-option>
          <el-option label="技术" value="技术"></el-option>
          <el-option label="委托" value="委托"></el-option>
          <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="合同状态">
            <el-select v-model="form.value2" placeholder="请选择">
          <el-option label="待审" value="待审"></el-option>
          <el-option label="合同有效" value="合同有效"></el-option>
          <el-option label="合同无效" value="合同无效"></el-option>
          <el-option label="已过期" value="已过期"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="是否欠款">
            <el-radio-group v-model="form.debt">
              <el-radio label="位置"></el-radio>
              <el-radio label="有"></el-radio>
              <el-radio label="无"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="续费状态">
            <el-select v-model="form.value3" placeholder="请选择">
          <el-option label="待审" value="待审"></el-option>
          <el-option label="续费有效" value="续费有效"></el-option>
          <el-option label="续费无效" value="续费无效"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="业务员">
            <el-select v-model="form.person" placeholder="请选择">
          <el-option label="超级管理员" value="超级管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

          <el-col :span="8">
          <el-form-item label="到期日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date5"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date6"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>

      <el-col :span="8">
        <el-form-item label="备注" class="form-1">
          <el-input
            type="textarea"
            v-model="form.decrect"
            class="remark"
          ></el-input>
        </el-form-item>
      </el-col>

        <el-col :span="8">
          <el-form-item label="自定义搜索">
            <el-input v-model="form.self"></el-input>
          </el-form-item>
        </el-col>

      <el-row class="btn">
        <el-col>
          <el-button type="primary"  plain>立即搜索</el-button>
          <el-button type="warning"  plain>清空条件</el-button>
          <el-button type="info"  plain>导出数据</el-button>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      form:{
        number:'',
        name:'',
        contranctcode:'',
        date1:'',
        date2:'',
        date3:'',
        date4:'',
        value1:'',
        value2:'',
        debt:'',
        value3:'',
        person:'',
        date5:'',
        date6:'',
        decrect:'',
        self:''
      },
    }
      },

    methods:{
      
    }
}
</script>

<style lang="scss" scoped>
.content {
  margin: 20px 0px;
}
.btn {
  text-align: center;
  height: 15px;
}
.el-col {
   overflow: initial;
}
</style>